<template>
  <div>
    <h2>计算属性的练习：购物车</h2>
    <div class="item" v-for="(item, index) in cartList" :key="index">
      <!-- 布局 -->
      <div
        :class="item.isSelect ? 'item-left-Active' : 'item-left'"
        @click="selects(index)"
      ></div>
      <div>{{ item.name }}，</div>
      <div>价格：{{ item.pic }}</div>

      <div>
        <button @click="reduce(index)" v-if="item.num > 1">-</button
        >{{ item.num }} <button @click="add(index)">+</button>
      </div>
    </div>
    <h2>总价：{{ allpic }}</h2>
    <h2>实际支付：{{ payPic }}</h2>
    <!-- 
        1:展示数据=》for
        2: 页面加载 默认选中 ,
            1）默认选中=》动态样式  ,给每一项添加一个属性isSelect为true
        
        3:计算总价

        4:商品添加和减少

       -->

    <!-- 全选 
         1布局
         2：动态的样式 =》1选中  2没有选中
         3:添加事件
         4:
       -->
    <div class="selectAll">
      <div
        :class="allSelect ? 'selectAll-left-active' : 'selectAll-left'"
        @click="allChange"
      ></div>
      <div>全选</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        { pic: 100, num: 1, name: "手机1", isSelect: true },
        { pic: 200, num: 1, name: "手机2", isSelect: true },
      ],
      payPic: 0, //实际支付的价格
      allPicS: 0, //商品总价
      allSelect: true,
    };
  },

  computed: {
    allpic() {
      // 价格*数量+所有
      let arrPic = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        // (1)判断 是否全部选中
        if (this.cartList[i].isSelect) {
          //选中计算总数
          arrPic += this.cartList[i].pic * this.cartList[i].num;
        }
        //定义方法 处理全选
      }
      this.allSelectShow();
      this.allPicS = arrPic;
      return arrPic;
    },
  },
  watch: {
    allPicS: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);

        //做减免处理
        this.changePay(newVal);
      },
    },
  },
  methods: {
    allSelectShow() {
    

      //就是这个数组中isSelect 是否有false
      //（1）如果 全选为false
      // (2)没有  为true

      //findIndex 根据条件找数组索引 ，如果没有 返回-1  如果有返回索引
      let index = this.cartList.findIndex((item) => {
        return item.isSelect == false;
      });

      console.log(index);

      //如果为-1
      if (index > -1) {
        //没有全选
        this.allSelect = false;
      } else {
        this.allSelect = true;
      }
    },
    selects(index) {
      //选中于不选中
      // 根据index 找到那一下
      this.cartList[index].isSelect = !this.cartList[index].isSelect;
    },
    allChange() {
      //改变颜色
      this.allSelect = !this.allSelect;
      if (this.allSelect) {
        for (let i = 0; i < this.cartList.length; i++) {
          // (1)判断 是否全部选中
          this.cartList[i].isSelect =true

          //定义方法 处理全选
        }
      }else{
        
          for (let i = 0; i < this.cartList.length; i++) {
          // (1)判断 是否全部选中
          this.cartList[i].isSelect =false

          //定义方法 处理全选
        } 

      }
    },
    changePay(newVal) {
      if (newVal >= 1000 && 2000 > newVal) {
        this.payPic = newVal - 200;
      } else {
        this.payPic = newVal;
      }
    },
    reduce(index) {
      this.cartList[index].num = this.cartList[index].num - 1;
    },
    add(index) {
      console.log(index);
      this.cartList[index].num = this.cartList[index].num + 1;
    },
  },
};
</script>

<style>
.item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.item-left {
  height: 40px;
  width: 40px;
  border: 1px solid black;
  background: #fff;
  border-radius: 50%;
}
.item-left-Active {
  height: 40px;
  width: 40px;
  border: 1px solid black;
  background: red;
  border-radius: 50%;
}

.selectAll {
  display: flex;
  align-items: center;
}
.selectAll-left {
  height: 40px;
  width: 40px;
  border: 1px solid black;

  border-radius: 50%;
}
.selectAll-left-active {
  height: 40px;
  width: 40px;
  border: 1px solid black;
  background: red;
  border-radius: 50%;
}
</style>